<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
</head>

<body>
    <button id="btn1">存</button>
    <button id="btn2">取</button>
    <button id="btn3">删</button>
    <script>
        let btn1Ele = document.getElementById("btn1")
        let btn2Ele = document.getElementById("btn2")
        let btn3Ele = document.getElementById("btn3")
        btn1Ele.addEventListener("click", function () {
            localStorage.setItem("username", "二桥");
            localStorage.setItem("age", 21);
            //本地存储存储对象或数组，要将其序列化为字符串进行存储
            // JSON.stringify(对象/数组): 将其序列化为json字符串
            let user = { name: "拾涯", age: 19 };
            localStorage.setItem("user", JSON.stringify(user));

        });
        btn2Ele.addEventListener("click", function () {
            console.log(localStorage.getItem("username"));
            console.log(localStorage.getItem("age"));
            // JSON.parse(json字符串)：将json字符串转化为js对象
            let user = JSON.parse(localStorage.getItem("user"));
            console.log(user);
        });
        btn3Ele.addEventListener("click", function () {
            //删除一个
            // localStorage.removeItem("username");
            // localStorage.removeItem("age");
            // localStorage.removeItem("user");
            //删除所有
            localStorage.clear();
        });
    </script>
</body>

</html>